ReactNative expo x AdMobで広告表示

expoで開発してるアプリにAdMobの広告を導入する。そんなお話。

基本的な使い方は難しくないし、ドキュメントの量も少ないので、サクッと実装できる。

実装前にこれ読んどくと良さげ（AdMobにある広告タイプなど）

Install

$ expo install expo-ads-admob

code: sample.js

import {

setTestDeviceIDAsync,

} from 'expo-ads-admob';

await setTestDeviceIDAsync('EMULATOR');

バナー広告

code: sample.js

import {

AdMobBanner,

} from 'expo-ads-admob';

<AdMobBanner

bannerSize="fullBanner"

adUnitID="ca-app-pub-3940256099942544/6300978111" // Test ID, Replace with your-admob-unit-id

servePersonalizedAds // true or false

onDidFailToReceiveAdWithError={this.bannerError} />

インタースティシャル広告

code: sample.js

import {

AdMobInterstitial,

} from 'expo-ads-admob';

await AdMobInterstitial.setAdUnitID('ca-app-pub-3940256099942544/1033173712'); // Test ID, Replace with your-admob-unit-id

await AdMobInterstitial.requestAdAsync({ servePersonalizedAds: true});

await AdMobInterstitial.showAdAsync();

リワード広告

code: sample.js

await AdMobRewarded.setAdUnitID('ca-app-pub-3940256099942544/5224354917'); // Test ID, Replace with your-admob-unit-id

await AdMobRewarded.requestAdAsync();

await AdMobRewarded.showAdAsync();

参考.icon